<h1>Wybór sali</h1>

<? if ($t['noHalls']): ?>
<p>Aktualnie nie ma żadnych sal.</p>
<? else: ?>

<div id="hallFilters">
	<p>Pokaż sale o pojemności przynajmniej</p>
	<div id="minCapacity"></div>
</div>

<div id="hallsThumbs">
	<? foreach ($t['halls'] as $hall): ?>
	<div class="hall" data-capacity="<?= $hall['capacity'] ?>">
		<a href="<?= $ro->gen('reservation.browse', array('hall' => $hall['id'])) ?>"><img src="<?= $hall['thumb'] ?>" alt="" title="<?= $hall['name'] ?>, <?= $hall['address'] ?>" /></a>
		<p>
			<em><?= $hall['name'] ?></em>
			<?= $hall['capacity'] ?> miejsc
		</p>
	</div>
	<? endforeach ?>
</div>

<script type="text/javascript">
$(function()
{
	$('#minCapacity').slider({
		min: 1,
		max: <?= $t['maxCapacity'] ?>,
		value: 1,
		animate: true,
		slide: function(e, ui)
		{
			ui.handle.innerHTML = '<span>' + ui.value + '</span>';
			
			$('#hallsThumbs .hall').each(function(i, hall)
			{
				if (parseInt($(hall).attr('data-capacity')) >= ui.value)
				{
					$(hall).fadeIn(500);
				}
				else
				{
					$(hall).fadeOut(500);
				}
			});
		}
	});
});
</script>
<? endif ?>